<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>The Use Guides Of CSS Manual</title>
<meta name="description" content="CSS3参考手册使用指引" />
<meta name="keywords" content="CSS, CSS3, CSS参考手册, 指引, 帮助" />
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<meta name="robots" content="all" />
<!--[if lte IE 8]>
<script src="../js/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="../skin/article.css" />
</head>
<body>
<nav id="guide" class="g-mod">
	<div class="from">
		<a href="http://css.doyoe.com/" target="_blank">CSS3参考手册</a>
		<span>&#187;</span>
		<a href="index.htm" id="category" rel="introduction" name="guide">简介</a>
		<span>&#187;</span>
	</div>
	<div class="to">
		<span class="label">相关内容：</span>
		<div class="g-combobox g-transition">
			<a href="?" class="g-transition target">
				<strong>其它简介条目</strong>
				<span>选择其它项<!--[if lte IE 7]><ins>IE7 and earlier, Get to die</ins><![endif]--></span>
			</a>
			<div class="g-transition list">
				<ul>
					<!-- 插入分类快速导航 -->
				</ul>
			</div>
		</div>
	</div>
</nav>
<header id="hd">
	<section id="title" class="g-mod">
		<h1 class="tit">The Use Guides</h1>
		<ul class="info">
			<li>阅读及使用指引</li>
		</ul>
		<!-- 插入浏览器信息 -->
	</section>
</header>
<section id="bd">
	<section id="use-guides" class="g-mod g-about">
		<h2>手册使用说明 The Instruction</h2>
		<ul>
			<li class="g-color-light"><strong>手册在接下来将只更新 IE8.0+, Firefox40.0+, Chrome40.0+, iOS8.0+, Android4.4+, Android Chrome28.0+, Opera40.0+（Opera从15.0开始转入webkit阵营）的支持数据，低于这些版本的数据将不再更新，共同期望未来前端的环境越来越好。</strong></li>
			<li>对于 `IE` 和 `Edge`，手册是合并到一起体现的。`IE11.0 及之前` 的版本为 `IE 浏览器`，`IE12.0 及以后` 的版本为 `Edge 浏览器`，阅读者可根据版本来确定。</li>
			<li>Android 4.4 开始将 Webview 由 Webkit 切换到 Chromium，4.4.2 内置的是 chromium 30，5.0 内置的是 chromium 37，不同的厂商会存在差异。需要注意的是虽然 Android 4.4 将 Webview 切换到 Chromium，但是这仍然与 Android Chrome 是有区别的，如果你想升级 Android Webview 只能通过升级手机系统来实现，单纯升级 Android Chrome 并不能改变 Android Webview 的版本</li>
			<li>关于本手册一些特定阅读方式的说明</li>
			<li>关于本手册存在的一些问题说明及解决方法</li>
		</ul>
	</section>
	<section id="read-guides" class="g-mod g-about">
		<h2>阅读指引 The Read Guides</h2>
		<ul>
			<li>
				<h3>导航指引：</h3>
				<ul class="gitem">
					<li>
						<p>左侧导航区域，橙色为CSS3新增，紫色为在CSS3中有变更（比如增加了新的属性值），黑色为CSS2.1及更早前，如下所示：</p>
						<ul class="level-type">
							<li class="css3-new"><span class="g-color-css3-new">橙色</span> = CSS3新增</li>
							<li class="css3-change"><span class="g-color-css3-change">紫色</span> = 在CSS3中有变更</li>
							<li><span>黑色</span> = CSS2.1及更早</li>
						</ul>
					</li>
				</ul>
			</li>
			<li id="syntax-guide">
				<h3>语法指引：</h3>
				<p>任何一种形态、关键字、群组后面都可以接下列修饰符中的其中一个：</p>
				<ul class="gitem">
					<li>* 代表出现0次或以上。</li>
					<li>+ 代表出现1次或以上。</li>
					<li>? 代表是可选的，即出现0次或1次。</li>
					<li>{A} 代表出现A次。</li>
					<li>{A,B} 代表出现 A 次以上 B 次以下，其中B可以省略为 {A,}，代表至少出现A次，无上限。</li>
					<li># 代表出现1次以上，以逗号隔开，可以选择后面跟大括号的形式，精确表示重复多少次，如<code class="css">&lt;length&gt;#{1,4}</code>。</li>
					<li>! 代表出现产生一个值，即使组内的值都可以省略，但至少有一个值不能呗省略，如<code class="css">[ A? B? C? ]!</code>。</li>
					<li>
						<table class="g-data">
							<tbody>
								<tr>
									<td>0个或更多</td>
									<td>A? B? C?</td>
									<td>A? || B? || C?</td>
								</tr>
								<tr>
									<td>1个或更多</td>
									<td>[ A? B? C? ]!</td>
									<td>A || B || C</td>
								</tr>
								<tr>
									<td>1个</td>
									<td>A | B | C</td>
									<td></td>
								</tr>
								<tr>
									<td>所有</td>
									<td>A B C</td>
									<td>A && B && C</td>
								</tr>
							</tbody>
						</table>
					</li>
				</ul>
			</li>
			<li>
				<h3>兼容性：</h3>
				<ul class="gitem">
					<li>手册在所有参考页的头部和底部都有对浏览器兼容性测试基础环境的说明。</li>
					<li>兼容性试图将会慢慢全部改成如下表：
						<div class="cont g-attr">
							<ul class="support-type">
								<li><span class="support">浅绿</span> = 支持</li>
								<li><span class="unsupport">红色</span> = 不支持</li>
								<li><span class="partsupport">粉色</span> = 部分支持</li>
							</ul>
							<table class="g-data">
								<thead>
									<tr>
										<th>Values</th>
										<th>IE</th>
										<th>Firefox</th>
										<th>Chrome</th>
										<th>Safari</th>
										<th>Opera</th>
										<th>iOS Safari</th>
										<th>Android Browser</th>
										<th>Android Chrome</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<td rowspan="3"><strong>Basic Support</strong></td>
										<td class="unsupport">9.0</td>
										<td rowspan="3" class="support">40.0+</td>
										<td rowspan="3" class="support">40.0+</td>
										<td class="support">8.0+<sup class="fix">-webkit-</sup></td>
										<td rowspan="3" class="support">40.0+</td>
										<td class="support">8.0+<sup class="fix">-webkit-</sup></td>
										<td rowspan="3" class="support">4.4+</td>
										<td rowspan="3" class="support">28.0+</td>
									</tr>
									<tr>
										<td class="partsupport">10.0-11.0</td>
										<td rowspan="2" class="support">9.0</td>
										<td rowspan="2" class="support">9.0</td>
									</tr>
									<tr>
										<td class="support">12.0+</td>
									</tr>
								</tbody>
							</table>
						</div>
						<strong>假设上述表格是对属性<a href="../properties/flex/order.htm" class="property">order</a>的兼容性说明，那表示：</strong>
						<p>IE9.0及之前的版本不支持该属性，10.0-11.0部分支持该属性（需要使用2012版语法），12.0以后（即edge浏览器）支持该属性；</p>
						<p>Firefox, Chrome, Opera,Android 全面支持该属性；</p>
						<p>Safari 与 iOS Safari 8.0 使用该属性需加 <strong class="g-color-light">-webkit-</strong> 前缀，9.0及以后版本完全支持该属性；</p>
					</li>
				</ul>
			</li>
			<li>
				<h3>脚本特性：</h3>
				<ul class="gitem">
					<li>
						<p>每个CSS属性参考页所指定的该属性的脚本特性，是指js如何访问该CSS属性。如：float属性的脚本特性为styleFloat或cssFloat，那么js这样写：</p>
						<div class="gquote">
							<p class="gquote-tit"><strong>js代码：</strong></p>
							<blockquote class="gquote-cont"><pre>IE：　<code>DOM.style.styleFloat</code>
非IE：<code>DOM.style.cssFloat</code>
</pre></blockquote>
						</div>
					</li>
				</ul>
			</li>
			<li>
				<h3>示例：</h3>
				<ul class="gitem">
					<li>每个CSS参考页的示例都可以点击“运行”按钮，直接查看效果。</li>
					<li>目前已知在win7下，本手册的chm版下的示例点击“运行”会出错，在未修复该问题前，如需查看某个示例，请将该示例代码拷贝到本地进行浏览。</li>
				</ul>
			</li>
		</ul>
	</section>
	<section id="question-guides" class="g-mod g-about">
		<h2>问题指引 The Question Guides</h2>
		<ul class="gitem">
			<li>
				<h3>在win7下，本手册的chm版下的示例点击“运行”出错</h3>
				<p>问题未被修复。在未修复该问题前，如需查看某个示例，请将该示例代码拷贝到本地进行浏览。</p>
			</li>
			<li>
				<h3>chm版下载后打开出现网页无法访问的情况</h3>
				<p>在chm上右键选择“属性”，勾选最下面的“解除锁定”并应用确定，再次打开就可以了。</p>
			</li>
		</ul>
	</section>
</section>
<footer id="ft">
	<aside id="rights" class="g-mod">
		<!-- 插入浏览器及版权信息 -->
	</aside>
</footer>
<script src="../js/jquery.js"></script>
<script src="../js/inner.js"></script>
</body>
</html>